<template>
	<view class="container">
		<view class="page-body uni-content-info">
			<view class='cropper-content'>
				<view v-if="isShowImg" class="uni-corpper"
					:style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
					<view class="uni-corpper-content"
						:style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
						<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'" id="image"></image>
						<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove"
							@touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
							:style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
							<view class="uni-cropper-view-box" style="border: 1px solid red;">
								<view class="uni-cropper-dashed-h"></view>
								<view class="uni-cropper-dashed-v"></view>
								<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart"
									@touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart"
									@touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart"
									@touchmove.stop="dragMove"></view>
								<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart"
									@touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart"
									@touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
								<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart"
									@touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-rb" data-drag="rightBottom"
									@touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart"
									@touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
								<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
								<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart"
									@touchmove.stop="dragMove"></view>
								<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='cropper-config'>
				<!-- <button type="primary reverse" @click="getImage" style='margin-top: 30upx;'> 旋转图片 </button> -->
				<button type="primary reverse" @click="turnImage" style='margin-top: 30upx;'> 旋转图片 </button>
				<button type="warn" @click="getImageInfo" style='margin-top: 30upx;'> 确定 </button>
			</view>
			<view class="" style="text-align: center;">
				请将正脸显示在图片中间
			</view>
			<canvas canvas-id="myCanvas"
				:style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
		</view>
		<!-- <page-foot :name="name"></page-foot> -->
	</view>
</template>

<script>
	var EXIF = require('exif-js');
	let sysInfo = uni.getSystemInfoSync();
	let SCREEN_WIDTH = sysInfo.screenWidth
	let SCREEN_HEIGHT = sysInfo.screenHeight
	let PAGE_X, // 手按下的x位置
		PAGE_Y, // 手按下y的位置
		PR = sysInfo.pixelRatio, // dpi
		T_PAGE_X, // 手移动的时候x的位置
		T_PAGE_Y, // 手移动的时候Y的位置
		CUT_L, // 初始化拖拽元素的left值
		CUT_T, // 初始化拖拽元素的top值
		CUT_R, // 初始化拖拽元素的
		CUT_B, // 初始化拖拽元素的
		CUT_W, // 初始化拖拽元素的宽度
		CUT_H, //  初始化拖拽元素的高度
		IMG_RATIO, // 图片比例
		IMG_REAL_W, // 图片实际的宽度
		IMG_REAL_H, // 图片实际的高度
		DRAFG_MOVE_RATIO = 1, //移动时候的比例,
		INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
		DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度

	export default {
		/**
		 * 页面的初始数据
		 */
		data() {
			return {
				truebase64:'',
				name: '杨大宝',
				imageSrc: '',
				isShowImg: false,
				// 初始化的宽高
				cropperInitW: SCREEN_WIDTH,
				cropperInitH: SCREEN_WIDTH,
				// 动态的宽高
				cropperW: SCREEN_WIDTH,
				cropperH: SCREEN_WIDTH,
				// 动态的left top值
				cropperL: 0,
				cropperT: 0,

				transL: 0,
				transT: 0,

				// 图片缩放值
				scaleP: 0,
				imageW: 0,
				imageH: 0,

				// 裁剪框 宽高
				cutL: 0,
				cutT: 0,
				cutB: SCREEN_WIDTH,
				cutR: '100%',
				qualityWidth: DRAW_IMAGE_W,
				innerAspectRadio: DRAFG_MOVE_RATIO,

				//旋转
				transformDeg: 0
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			// console.log(option.jpg)
			this.imageSrc = options.jpg
			uni.removeStorage({
				key: 'jpg',
				success: function(res) {
					console.log('success');
				}
			});
		},


		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {

			this.loadImage();

		},
		methods: {
			turnImage: function() {
				this.$data.transformDeg = this.$data.transformDeg + 90
				// document.getElementById("image").style.transform = "rotate(" + this.$data.transformDeg + 'deg)';
				// this.loadImage()
				let arr = []
				arr[0] = this.imageSrc
				this.choiceImg(arr)
			},
			// 1、
			choiceImg(imgArr){
			var that = this;
						let maxWidth = 500; //压缩图片最大宽度
						let Orientation = 1;
						// uni.chooseImage({
						// 	count: 1, // 能够选择的图片数量
						// 	sizeType: ['original', 'compressed'], // original: 原图, compressed: 压缩图, 默认二者都有
						// 	sourceType: ['album'], // album: 从相册选择   camera: 相机拍照
						// 	success: res => {
						// 		let imgArr = res.tempFilePaths; // 所选择图片的临时路径数组
						// 		//BlobUrl转blob数据
						// 		console.log(imgArr)
						// 		uni.showToast({
						// 			icon: "none",
						// 			title: "图片处理中..."
						// 		})
								//blob数据转file
								this.objectURLToBlob(imgArr[0], function(blob) {
									let files = new window.File([blob], 'file.name', { type: 'file.type' });
									console.log('获取图片文件', files);
									EXIF.getData(files, async function() {
										let or = EXIF.getTag(this, '6'); //这个Orientation 就是我们判断需不需要旋转的值了，有1、3、6、8
										console.log(or);
										Orientation = or;
										var img = null;
										var canvas = null;
										await that.comprossImage(imgArr[0], maxWidth, function(e) {
											img = e.img;
											canvas = e.canvas;
										});
										let baseStr = '';
										//如果方向角不为1，都需要进行旋转
										baseStr = that.rotateImg(img, 'right', canvas);
				// 						switch (Orientation) {
				// 							case 6: //需要顺时针（向右）90度旋转
				// 								console.log('（向右）90度旋转');
				// 								baseStr = that.rotateImg(img, 'right', canvas);
				// 								break;
				// 							case 8: //需要逆时针（向左）90度旋转
				// 								console.log('向左）90度旋转');
				// 								baseStr = rotateImg(img, 'left', canvas);
				// 								break;
			 
				// 							case 3: //需要180度旋转 转两次
				// 								console.log('需要180度旋转');
				// 								baseStr = that.rotateImg(img, 'right', canvas, 2);
				// 								break;
				// 							default:
				// 								baseStr = that.rotateImg(img, '', canvas);
				// 								break;
				// 						}
									});
								});
						// 	}
						// });
			},
			
			dataURLtoFile: function(dataurl, filename) { 
				    var arr = dataurl.split(','),
				        mime = arr[0].match(/:(.*?);/)[1],
				        bstr = atob(arr[1]),
				        n = bstr.length,
				        u8arr = new Uint8Array(n);
				    while (n--) {
				        u8arr[n] = bstr.charCodeAt(n);
				    }
				    return new File([u8arr], filename, { type: mime });
				},
			
			// 2、1中使用到的将blob转化为file方法 和图片的压缩方法
			objectURLToBlob(url, callback) {
						var http = new XMLHttpRequest();
						http.open('GET', url, true);
						http.responseType = 'blob';
						http.onload = function(e) {
							if (this.status == 200 || this.status === 0) {
								callback(this.response);
							}
						};
						http.send();
					},
					async comprossImage(imgSrc, maxWidth, func) {
						if (!imgSrc) return 0;
						return new Promise((resolve, reject) => {
							uni.getImageInfo({
								src: imgSrc,
								success(res) {
									let img = new Image();
									img.src = res.path;
									console.log(img);
			 
									let canvas = document.createElement('canvas');
			 
									let obj = new Object();
									obj.img = img;
									obj.canvas = canvas;
									resolve(func(obj));
								}
							});
						});
					},
				// 3、图片的旋转处理
				rotateImg(img, direction, canvas, times = 1) {
					let _this = this
							console.log('开始旋转');
							//最小与最大旋转方向，图片旋转4次后回到原方向
							var min_step = 0;
							var max_step = 3;
							if (img == null) return;
				 
							//img的高度和宽度不能在img元素隐藏后获取，否则会出错
							var height = img.height;
							var width = img.width;
							let maxWidth = 500;
							let canvasWidth = width; //图片原始长宽
							let canvasHeight = height;
							let base = canvasWidth / canvasHeight;
							console.log(maxWidth);
							if (canvasWidth > maxWidth) {
								canvasWidth = maxWidth;
								canvasHeight = Math.floor(canvasWidth / base);
							}
							width = canvasWidth;
							height = canvasHeight;
							var step = 0;
				 
							if (step == null) {
								step = min_step;
							}
				 
							if (direction == 'right') {
								step += times;
								//旋转到原位置，即超过最大值
								step > max_step && (step = min_step);
							} else if (direction == 'left') {
								step -= times;
								step < min_step && (step = max_step);
							} else {
								//不旋转
								step = 0;
							}
				 
							//旋转角度以弧度值为参数
							var degree = (step * 90 * Math.PI) / 180;
							var ctx = canvas.getContext('2d');
							// console.log(degree)
							// console.log(step)
							switch (step) {
								case 1:
									console.log('右旋转 90度');
									canvas.width = height;
									canvas.height = width;
									ctx.rotate(degree);
									ctx.drawImage(img, 0, -height, width, height);
									break;
								case 2:
									//console.log('旋转 180度')
									canvas.width = width;
									canvas.height = height;
									ctx.rotate(degree);
									ctx.drawImage(img, -width, -height, width, height);
									break;
								case 3:
									console.log('左旋转 90度');
									canvas.width = height;
									canvas.height = width;
									ctx.rotate(degree);
									ctx.drawImage(img, -width, 0, width, height);
									break;
								default:
									//不旋转
									canvas.width = width;
									canvas.height = height;
									ctx.drawImage(img, 0, 0, width, height);
									break;
							}
				 
							let baseStr = canvas.toDataURL('image/jpeg', 1);
							// console.log(baseStr)
							// return baseStr;
							// replace("data:image/jpeg;base64,", "")
				            // 将base64转化为blob文件进行图片上传，（考虑到转化后再上传耗费时间暂时没有使用，如果需要base64ToPath 方法可百度或者私信我）
							// base64ToPath(baseStr).then(tempPath => {
							// 	this.uploadBgImg(tempPath)
							// });
				            // 自定义上传请求
							_this.truebase64 = baseStr
							_this.imageSrc = baseStr
							_this.loadImage()
							return baseStr
							// this.uploadBaseImg(baseStr);
						},
			setData: function(obj) {
				let that = this;
				Object.keys(obj).forEach(function(key) {
					that.$set(that.$data, key, obj[key])

				});
			},
			getImage: function() {
				var _this = this
				uni.chooseImage({
					success: function(res) {
						_this.setData({
							imageSrc: res.tempFilePaths[0],
						})
						_this.loadImage();
					},
				})
			},
			loadImage: function() {
				var _this = this
				uni.getImageInfo({
					src: _this.imageSrc,
					success: function success(res) {
						IMG_RATIO = res.width / res.height
						if (IMG_RATIO >= 1) {
							IMG_REAL_W = SCREEN_WIDTH
							IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
						} else {
							IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
							IMG_REAL_H = SCREEN_WIDTH
						}
						let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
						INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange

						// 根据图片的宽高显示不同的效果   保证图片可以正常显示
						if (IMG_RATIO >= 1) {
							// if (false) {
							let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO -
								INIT_DRAG_POSITION)) / 2);
							let cutB = cutT;
							let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2);
							let cutR = cutL;


							cutT = (SCREEN_WIDTH / IMG_RATIO) * 0
							cutB = cutT

							cutL = (((SCREEN_WIDTH / IMG_RATIO) * 1) - SCREEN_WIDTH) / -2
							cutR = cutL;

							_this.setData({
								cropperW: SCREEN_WIDTH,
								cropperH: SCREEN_WIDTH / IMG_RATIO,
								// 初始化left right
								cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
								cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
								cutL: cutL,
								cutT: cutT,
								cutR: cutR,
								cutB: cutB,
								// 图片缩放值
								imageW: IMG_REAL_W,
								imageH: IMG_REAL_H,
								scaleP: IMG_REAL_W / SCREEN_WIDTH,
								qualityWidth: DRAW_IMAGE_W,
								innerAspectRadio: IMG_RATIO
							})
						} else {
							let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) /
								2);
							let cutR = cutL;
							let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2);
							let cutB = cutT;


							//重新赋值
							cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO) * 0)
							cutR = Math.ceil((SCREEN_WIDTH * IMG_RATIO) * 0)

							cutT = (SCREEN_WIDTH - (SCREEN_WIDTH * IMG_RATIO) * 1) / 2
							cutB = cutT
							_this.setData({
								cropperW: SCREEN_WIDTH * IMG_RATIO,
								cropperH: SCREEN_WIDTH,
								// 初始化left right
								cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
								cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
								cutL: cutL,
								cutT: cutT,
								cutR: cutR,
								cutB: cutB,
								// 图片缩放值
								imageW: IMG_REAL_W,
								imageH: IMG_REAL_H,
								scaleP: IMG_REAL_W / SCREEN_WIDTH,
								qualityWidth: DRAW_IMAGE_W,
								innerAspectRadio: IMG_RATIO
							})
						}
						_this.setData({
							isShowImg: true
						})
						uni.hideLoading()
					}
				})
			},
			// 拖动时候触发的touchStart事件
			contentStartMove(e) {
				PAGE_X = e.touches[0].pageX
				PAGE_Y = e.touches[0].pageY
			},

			// 拖动时候触发的touchMove事件
			contentMoveing(e) {

				var _this = this

				var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
				var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
				// 左移
				if (dragLengthX > 0) {
					if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
				} else {
					if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
				}

				if (dragLengthY > 0) {
					if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
				} else {
					if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
				}
				this.setData({
					cutL: this.cutL - dragLengthX,
					cutT: this.cutT - dragLengthY,
					cutR: this.cutR + dragLengthX,
					cutB: this.cutB + dragLengthY
				})
				PAGE_X = e.touches[0].pageX
				PAGE_Y = e.touches[0].pageY
			},

			contentTouchEnd() {

			},

			// 获取图片
			getImageInfo() {
				var _this = this;
				// 将图片写入画布
				const ctx = uni.createCanvasContext('myCanvas');
				ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H);
				ctx.draw();

				setTimeout(function() {
					var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W;
					var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H;
					var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W;
					var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H;



					uni.canvasToTempFilePath({
						x: canvasL,
						y: canvasT,
						width: canvasW,
						height: canvasH,
						destWidth: canvasW,
						destHeight: canvasH,
						quality: 0.5,
						canvasId: 'myCanvas',
						success: function(res) {
							uni.hideLoading()
							// 成功获得地址的地方
							//获取全部实例
							let pages = getCurrentPages();  //获取所有页面栈实例列表
							console.log(pages)
							let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
							prevPage.$data.modesrc = res.tempFilePath

							uni.redirectTo ({
								url: './index'
							})
						}
					});
				}, 100);

				// ctx.draw(true, () => {
				// 	uni.showLoading({
				// 		title: '图片生成中...',
				// 	});
				// 	// 获取画布要裁剪的位置和宽度   均为百分比 * 画布中图片的宽度    保证了在微信小程序中裁剪的图片模糊  位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)

				// });



			},

			// 设置大小的时候触发的touchStart事件
			dragStart(e) {
				T_PAGE_X = e.touches[0].pageX
				T_PAGE_Y = e.touches[0].pageY
				CUT_L = this.cutL
				CUT_R = this.cutR
				CUT_B = this.cutB
				CUT_T = this.cutT
			},

			// 设置大小的时候触发的touchMove事件
			dragMove(e) {
				var _this = this
				var dragType = e.target.dataset.drag
				// return
				switch (dragType) {
					case 'right':
						var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						if (CUT_R + dragLength < 0) dragLength = -CUT_R
						this.setData({
							cutR: CUT_R + dragLength
						})
						break;
					case 'left':
						var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						if (CUT_L - dragLength < 0) dragLength = CUT_L
						if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this
							.cutR)
						this.setData({
							cutL: CUT_L - dragLength
						})
						break;
					case 'top':
						var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
						if (CUT_T - dragLength < 0) dragLength = CUT_T
						if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this
							.cutB)
						this.setData({
							cutT: CUT_T - dragLength
						})
						break;
					case 'bottom':
						var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
						if (CUT_B + dragLength < 0) dragLength = -CUT_B
						this.setData({
							cutB: CUT_B + dragLength
						})
						break;
					case 'rightBottom':
						var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
						var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO

						if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
						if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
						let cutB = CUT_B + dragLengthY;
						let cutR = CUT_R + dragLengthX;

						this.setData({
							cutB: cutB,
							cutR: cutR
						})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style>
	/* pages/uni-cropper/index.wxss */

	.uni-content-info {
		position: fixed;
		top: 80rpx;
		left: 0;
		right: 0;
		bottom: 0;
		display: block;
		align-items: center;
		flex-direction: column;
	}

	.cropper-config {
		padding: 20upx 40upx;
	}

	.cropper-content {
		min-height: 750upx;
		width: 100%;
	}

	.uni-corpper {
		top: 30rpx;
		position: relative;
		overflow: hidden;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		box-sizing: border-box;
	}

	.uni-corpper-content {
		position: relative;
	}

	.uni-corpper-content image {
		display: block;
		width: 100%;
		min-width: 0 !important;
		max-width: none !important;
		height: 100%;
		min-height: 0 !important;
		max-height: none !important;
		image-orientation: 0deg !important;
		margin: 0 auto;
	}

	/* 移动图片效果 */

	.uni-cropper-drag-box {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		cursor: move;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1;
	}

	/* 内部的信息 */

	.uni-corpper-crop-box {
		position: absolute;
		background: rgba(255, 255, 255, 0.3);
		z-index: 2;
	}

	.uni-corpper-crop-box .uni-cropper-view-box {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		overflow: visible;
		outline: 1upx solid #69f;
		outline-color: rgba(102, 153, 255, .75)
	}

	/* 横向虚线 */

	.uni-cropper-dashed-h {
		position: absolute;
		top: 33.33333333%;
		left: 0;
		width: 100%;
		height: 33.33333333%;
		border-top: 1upx dashed rgba(255, 255, 255, 0.5);
		border-bottom: 1upx dashed rgba(255, 255, 255, 0.5);
	}

	/* 纵向虚线 */

	.uni-cropper-dashed-v {
		position: absolute;
		left: 33.33333333%;
		top: 0;
		width: 33.33333333%;
		height: 100%;
		border-left: 1upx dashed rgba(255, 255, 255, 0.5);
		border-right: 1upx dashed rgba(255, 255, 255, 0.5);
	}

	/* 四个方向的线  为了之后的拖动事件*/

	.uni-cropper-line-t {
		position: absolute;
		display: block;
		width: 100%;

		top: 0;
		left: 0;
		height: 1upx;
		opacity: 0.1;
		cursor: n-resize;
	}

	.uni-cropper-line-t::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0upx;
		width: 100%;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0);
		bottom: 0;
		height: 41upx;
		background: transparent;
		z-index: 11;
	}

	.uni-cropper-line-r {
		position: absolute;
		display: block;

		top: 0;
		right: 0upx;
		width: 1upx;
		opacity: 0.1;
		height: 100%;
		cursor: e-resize;
	}

	.uni-cropper-line-r::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 41upx;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
		bottom: 0;
		height: 100%;
		background: transparent;
		z-index: 11;
	}

	.uni-cropper-line-b {
		position: absolute;
		display: block;
		width: 100%;

		bottom: 0;
		left: 0;
		height: 1upx;
		opacity: 0.1;
		cursor: s-resize;
	}

	.uni-cropper-line-b::before {
		content: '';
		position: absolute;
		top: 50%;
		right: 0upx;
		width: 100%;
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0);
		bottom: 0;
		height: 41upx;
		background: transparent;
		z-index: 11;
	}

	.uni-cropper-line-l {
		position: absolute;
		display: block;

		top: 0;
		left: 0;
		width: 1upx;
		opacity: 0.1;
		height: 100%;
		cursor: w-resize;
	}

	.uni-cropper-line-l::before {
		content: '';
		position: absolute;
		top: 0;
		left: 50%;
		width: 41upx;
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0);
		bottom: 0;
		height: 100%;
		background: transparent;
		z-index: 11;
	}

	.uni-cropper-point {
		width: 5upx;
		height: 5upx;

		opacity: .75;
		position: absolute;
		z-index: 3;
	}

	.point-t {
		top: -3upx;
		left: 50%;
		margin-left: -3upx;
		cursor: n-resize;
	}

	.point-tr {
		top: -3upx;
		left: 100%;
		margin-left: -3upx;
		cursor: n-resize;
	}

	.point-r {
		top: 50%;
		left: 100%;
		margin-left: -3upx;
		margin-top: -3upx;
		cursor: n-resize;
	}

	.point-rb {
		left: 100%;
		top: 100%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		cursor: n-resize;
		width: 36upx;
		height: 36upx;

		position: absolute;
		z-index: 1112;
		opacity: 1;
	}

	.point-b {
		left: 50%;
		top: 100%;
		margin-left: -3upx;
		margin-top: -3upx;
		cursor: n-resize;
	}

	.point-bl {
		left: 0%;
		top: 100%;
		margin-left: -3upx;
		margin-top: -3upx;
		cursor: n-resize;
	}

	.point-l {
		left: 0%;
		top: 50%;
		margin-left: -3upx;
		margin-top: -3upx;
		cursor: n-resize;
	}

	.point-lt {
		left: 0%;
		top: 0%;
		margin-left: -3upx;
		margin-top: -3upx;
		cursor: n-resize;
	}

	/* 裁剪框预览内容 */

	.uni-cropper-viewer {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.uni-cropper-viewer image {
		position: absolute;
		z-index: 2;
	}
</style>
